<template>
  <div class="lsc-addlist">
    
    <van-nav-bar
      title="地址列表"
      right-text="确定"
      @click-right="onClickAddress"
    />
    <van-address-list
      v-model="activeAddress"
      :list="addressList"
      @add="onAddAddress"
      @edit="onEditAddress"
    />
    <div style="text-align:center">
      <div v-if="!addressList.length">还没有添加收货地址哦！</div>
    </div>

    <div class="lsc-loading" v-if="isLoading">
      <div class="lsc-loading-mask"></div>
      <van-loading color="black" />
    </div>
  </div>
</template>

<script>
import api from '../../api'
import { mapGetters } from  'vuex'

export default {
  name: 'addlist',
  computed: {
    ...mapGetters({
      isLoading: 'getLoading',
      orderInfo: 'getOrderInfo'
    })
  },
  data () {
    return {
      activeAddress: '',
      addressList: []
    }
  },
  created() {
    this.activeAddress = this.$route.query.addid*1
    console.log(this.activeAddress)
    this.getAddressList()
  },
  methods: {
    getAddressList() {
      this.$store.dispatch('fetchLoading', true)
      
      this.axios.get(api.agent.addressItems)
        .then((res) => {
          this.$store.dispatch('fetchLoading', false)
          this.addressList = res.data.data
        })
    },
    onClickAddress() {
      console.log(this.activeAddress)
      console.log(this.addressList)
      this.addressList.forEach(element => {
        if(this.activeAddress == element.id) {
          console.log(element)
          this.orderInfo.addressInfo.contact_man = element.name
          this.orderInfo.addressInfo.contact_tel = element.tel
          this.orderInfo.addressInfo.province_name = element.province_name
          this.orderInfo.addressInfo.city_name = element.city_name
          this.orderInfo.addressInfo.address = element.address
          this.orderInfo.addressInfo.id = element.id
          this.$router.push('/order')
          return
        }
        
      });
    },
    onAddAddress() {
      this.$router.push('/address')
    },
    onEditAddress(item, index) {
      this.$router.push({path: '/address', query: {id: item.id}})
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.van-address-list__group {
  padding-bottom: 0;
}
</style>
